/* src/App.css */

:root {
   --main-bg: #242529e8;
   /* 主画布背景，比原来更清新，和卡片/标签呼应 */
   --sidebar-bg: #f9fcff;
   /* 侧边栏背景，区分主画布 */
   --card-default: #fff;
   /* 卡片默认背景，干净简洁 */
   --card-active: #f9f9f9;
   /* 卡片激活/编辑状态，浅灰提示交互 */
   --primary-blue: #4299e1;
   /* 主品牌色（按钮、选中高亮） */
   --text-main: #2d3748;
   /* 主要文字（标题、重要内容） */
   --text-secondary: #666;
   /* 次要文字（卡片内容、标签描述） */
   --border-base: #e2e8f0;
   /* 基础边框色，比原来更柔和 */
   --shadow-base: rgba(0, 0, 0, 0.04);
   /* 阴影弱化，更轻盈 */
}


body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background: var(--main-bg);
   overflow: hidden;
}

.app {
   display: flex;
   flex-direction: column;
   height: 100vh;
   width: 100vw;
}

.toolbar {
   padding: 10px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 100;
   position: fixed;
   right: 0;
   bottom: 0;
   display: flex;
   flex-direction: column;
   color: #c2c2c2;
}

.logout {
   cursor: pointer;
   padding: 12px;
   font-size: 14px;
   color: #696969;
   margin-top: 16px;
   text-align: right;
   text-decoration: underline;
}

.toolbar button {
   background: var(--primary-blue);
   color: #fff;
   box-shadow: none;
   padding: 8px 15px;
   border-radius: 4px;
   cursor: pointer;
   font-weight: bold;
}

.toolbar button:hover {
   background: #3182ce;
}

.logout:hover {
   color: #e14242;
}

.canvas-container {
   width: 100vw;
   height: 100vh;
   position: relative;
   overflow: hidden;
   background: var(--main-bg);
}

.canvas-container.space-pressed {
   cursor: grab;
}

.canvas-container.space-pressed:active {
   cursor: grabbing;
}

.connections-layer {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   transform-origin: 0 0;
}

.cards-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transform-origin: 0 0;
}

.card {
   position: absolute;
   border: 1px solid var(--border-base);
   box-shadow: 0 1px 4px var(--shadow-base);
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   padding: 12px 15px;
   box-sizing: border-box;
   transition: box-shadow 0.2s;
   cursor: default;
   display: flex;
   flex-direction: column;
}

.card:hover {
   box-shadow: 0 4px 12px var(--shadow-base);
}

.card.editing {
   box-shadow: 0 0 0 3px var(--primary-blue);
   background: var(--card-active);
}

.card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 8px;
}

.card-header h3 {
   margin: 0;
   font-size: 0.9rem;
   color: #2d3748;
   flex: 1;
   cursor: text;
}

input,
textarea {
   background: transparent;
   border: none;
   outline: none;
   color: var(--text-main);
}

textarea {
   line-height: 1.8;
   padding: 0;
}

.editable-title input {
   font-size: 0.9rem;
   font-weight: bold;
   border-radius: 4px;
   font-family: inherit;
   width: 100%;
   box-sizing: border-box;
}

.color-indicator-container {
   position: relative;
   margin-left: 10px;
}

.color-indicator {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   cursor: pointer;
   border: 1px solid #cbd5e0;
}

.color-picker-popup {
   position: absolute;
   top: 25px;
   right: 0;
   background: white;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   padding: 6px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 6px;
   z-index: 200;
}

.color-option {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   cursor: pointer;
   border: 1px solid #e2e8f0;
}

.color-option:hover {
   transform: scale(1.1);
   box-shadow: 0 0 0 2px #4299e1;
}

.editable-content {
   flex: 1;
   cursor: text;
}

.card-content {
   font-size: 0.8rem;
   color: #4a5568;
   line-height: 1.5;
   overflow: auto;
   flex: 1;
}

.card-content p {
   margin: 5px 0;
}

.editable-content textarea {
   width: 100%;
   height: 100%;
   border-radius: 4px;
   font-family: inherit;
   font-size: 0.8rem;
   resize: vertical;
   box-sizing: border-box;
   overflow: hidden;
}

.connecting-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   pointer-events: none;
   z-index: 50;
}

.connecting-message {
   background: #4299e1;
   color: white;
   padding: 10px 20px;
   border-radius: 20px;
   font-weight: bold;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cancel-connect {
   margin-top: 10px;
   background: #e53e3e;
   color: white;
   border: none;
   padding: 8px 15px;
   border-radius: 4px;
   cursor: pointer;
   font-weight: bold;
   pointer-events: auto;
}

.cancel-connect:hover {
   background: #c53030;
}

.connection-handle {
   cursor: pointer;
   transition: all 0.2s;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.connection-handle:hover {
   transform: scale(1.2);
   background-color: #4299e1 !important;
}

.card * {
   user-select: none;
}

.card.editing * {
   user-select: auto;
}


.context-menu {
   position: fixed;
   background: white;
   border: 1px solid #ddd;
   border-radius: 4px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   min-width: 100px;
}

.context-menu-item {
   padding: 2px 8px;
   cursor: pointer;
   font-size: 12px;
}

.context-menu-item:hover {
   background-color: #f5f5f5;
}

.resize-handle {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 16px;
   height: 16px;
   cursor: nwse-resize;
   background-color: rgba(0, 0, 0, 0.2);
   z-index: 10;
}

.resize-handle:hover {
   background-color: rgba(0, 0, 0, 0.4);
}

.tab-item {
   padding: 6px 10px;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.2s ease;
   display: flex;
   align-items: center;
   margin-bottom: 5px;
   border: none;
   color: #747474;
   background-color: #fff;
   outline: none;
   user-select: none;
}

.tab-item.active {
   color: var(--primary-blue);
   border: 1px solid var(--primary-blue);
   background: #e6f2ff;
}

.tab-item:hover {
   background: #e6f2ff;
   color: var(--primary-blue);
}

.tab-close {
   background: none;
   border: none;
   color: inherit;
   padding: 0 5px;
}

.tab-close:hover {
   color: red;
}